<template>
    <div>
        <a-modal v-model="show" :title="form.id ? '编辑' : '新增'" @ok="handleOk" @cancel="show = false">
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                <a-form-item label="计划任务Id">
                    <a-input v-model="form.checkTaskId" />
                </a-form-item>
                <a-form-item label="上报人">
                    <a-select v-model="form.reportUserId" placeholder="选择上报人" show-search>
                        <a-select-option :value="item.userId" v-for="(item, index) in userAllList" :key="index">
                            {{ item.userName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="检查结果">
                    <a-input v-model="form.checkResultTitle" />
                </a-form-item>
                <a-form-item label="检查类型">
                    <a-select v-model="form.checkType" placeholder="选择检查类型">
                        <a-select-option :value="item.value" v-for="(item, index) in checkTypeList" :key="index">
                            {{ item.name }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="适用组织">
                    <a-select v-model="form.orgId" placeholder="选择组织">
                        <a-select-option :value="item.orgId" v-for="(item, index) in orgList" :key="index">
                            {{ item.orgName }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="适用表格">
                    <a-select v-model="form.questionTableId" placeholder="选择表格 请先选择适用组织"
                        :disabled="form.orgId ? false : true">
                        <a-select-option :value="item.id" v-for="(item, index) in tableList" :key="index">
                            {{ item.tableName }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="检查结果">
                    <template v-if="form.addRecordResultQOList">
                        <div v-for="(item, index) in form.addRecordResultQOList" :key="index">
                            <a-row type="flex" justify="space-between">
                                <a-col :span="22">
                                    <a-row>
                                        <a-col span="6">附件</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.fileUrl" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">问题id</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.questionId" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">选择题答案Id</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.questionOptionId" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">简答题答案</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.questionResult" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">备注</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.remark" />
                                        </a-col>
                                    </a-row>
                                    <!-- <a-row>
                                        <a-col span="6">检查类型</a-col>
                                        <a-col span="18">
                                            <a-select v-model="item.checkType" placeholder="选择问题" mode="multiple">
                                                <a-select-option :value="item1.value"
                                                    v-for="(item1, index1) in checkTypeList" :key="index1">
                                                    {{ item1.name }}</a-select-option>
                                            </a-select>
                                        </a-col>
                                    </a-row> -->
                                </a-col>
                                <a-col :span="2" class="c">
                                    <a-popconfirm title="你确定要删除该选项吗?" ok-text="删除" cancel-text="取消"
                                        @confirm="deleteZone(index)">
                                        <a-icon type="close" style="font-size:20px;color:red;cursor: pointer;" />
                                    </a-popconfirm>
                                </a-col>
                            </a-row>
                            <a-divider />
                        </div>
                    </template>
                    <a-button type="primary" @click="addZone">
                        添加检查结果
                    </a-button>
                </a-form-item>
                <a-form-item label="隐患信息">
                    <template v-if="form.dangerRecordQOS">
                        <div v-for="(item, index) in form.dangerRecordQOS" :key="index">
                            <a-row type="flex" justify="space-between">
                                <a-col :span="22">
                                    <a-row>
                                        <a-col span="6">风险等级</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.dangerLevel" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">风险描述</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.dangerTitle" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">隐患分类</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.dangerType" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">问题</a-col>
                                        <a-col span="18">
                                            <a-input v-model="item.questionId" />
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">上报人</a-col>
                                        <a-col span="18">
                                            <a-select v-model="item.reportUserId" placeholder="选择上报人" show-search>
                                                <a-select-option :value="item.userId"
                                                    v-for="(item, index) in userAllList" :key="index">
                                                    {{ item.userName }}
                                                </a-select-option>
                                            </a-select>
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">复审人</a-col>
                                        <a-col span="18">
                                            <a-select v-model="item.recheckUserId" placeholder="选择复审人" show-search>
                                                <a-select-option :value="item.userId"
                                                    v-for="(item, index) in userAllList" :key="index">
                                                    {{ item.userName }}
                                                </a-select-option>
                                            </a-select>
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">整改措施</a-col>
                                        <a-col span="18">
                                            <template v-if="item.measuresQOList">
                                                <div v-for="(item1, index1) in item.measuresQOList" :key="index1">
                                                    <a-row type="flex" justify="space-between">
                                                        <a-col :span="22">
                                                            <a-row>
                                                                <a-col span="6">完成日期</a-col>
                                                                <a-col span="18">
                                                                    <a-date-picker v-model="item1.finishDate"
                                                                        style="width: 100%;">
                                                                    </a-date-picker>
                                                                </a-col>
                                                            </a-row>
                                                            <a-row>
                                                                <a-col span="6">详细描述</a-col>
                                                                <a-col span="18">
                                                                    <a-input v-model="item1.measuresDetail" />
                                                                </a-col>
                                                            </a-row>
                                                            <a-row>
                                                                <a-col span="6">整改措施</a-col>
                                                                <a-col span="18">
                                                                    <a-input v-model="item1.measuresName" />
                                                                </a-col>
                                                            </a-row>
                                                            <a-row>
                                                                <a-col span="6">整改结果</a-col>
                                                                <a-col span="18">
                                                                    <a-input v-model="item1.measuresResult" />
                                                                </a-col>
                                                            </a-row>
                                                            <a-row>
                                                                <a-col span="6">整改模式</a-col>
                                                                <a-col span="18">
                                                                    <a-input v-model="item1.measuresType" />
                                                                </a-col>
                                                            </a-row>
                                                            <a-row>
                                                                <a-col span="6">根本原因</a-col>
                                                                <a-col span="18">
                                                                    <a-input v-model="item1.primaryCause" />
                                                                </a-col>
                                                            </a-row>
                                                            <a-row>
                                                                <a-col span="6">负责组织</a-col>
                                                                <a-col span="18">
                                                                    <a-select v-model="item1.responsibleOrgId"
                                                                        placeholder="选择组织">
                                                                        <a-select-option :value="item2.orgId"
                                                                            v-for="(item2, index2) in orgList"
                                                                            :key="index2">
                                                                            {{ item2.orgName }}</a-select-option>
                                                                    </a-select>
                                                                </a-col>
                                                            </a-row>
                                                            <a-row>
                                                                <a-col span="6">责任人</a-col>
                                                                <a-col span="18">
                                                                    <a-select v-model="item1.responsibleUserId"
                                                                        placeholder="责任人">
                                                                        <a-select-option :value="item.userId"
                                                                            v-for="(item, index) in userAllList"
                                                                            :key="index">
                                                                            {{ item.userName }}
                                                                        </a-select-option>
                                                                    </a-select>
                                                                </a-col>
                                                            </a-row>
                                                        </a-col>
                                                        <a-col :span="2" class="c">
                                                            <a-popconfirm title="你确定要删除该整改措施吗?" ok-text="删除"
                                                                cancel-text="取消"
                                                                @confirm="deleteDangerMeasure(index, index1)">
                                                                <a-icon type="close"
                                                                    style="font-size:20px;color:red;cursor: pointer;" />
                                                            </a-popconfirm>
                                                        </a-col>
                                                    </a-row>
                                                    <a-divider />
                                                </div>

                                            </template>
                                            <a-button type="primary" @click="addMeasures(index)">
                                                添加增改措施
                                            </a-button>
                                        </a-col>
                                    </a-row>
                                </a-col>
                                <a-col :span="2" class="c">
                                    <a-popconfirm title="你确定要删除该隐患吗?" ok-text="删除" cancel-text="取消"
                                        @confirm="deleteDanger(index)">
                                        <a-icon type="close" style="font-size:20px;color:red;cursor: pointer;" />
                                    </a-popconfirm>
                                </a-col>
                            </a-row>
                            <a-divider />
                        </div>
                    </template>
                    <a-button type="primary" @click="addDanger">
                        添加隐患信息
                    </a-button>
                </a-form-item>
                <span style="font-size:0px;">{{ show10 }}</span>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
import { message } from 'ant-design-vue';
var dayjs = require('dayjs')
import { postRecordAdd, postRecordUpdate } from "@/services"
import { postTableList } from "@/services"
export default {
    props: {
        // 组织列表
        orgList: {
            default: () => { },
            type: Array,
        },
        // 检查类型列表
        checkTypeList: {
            default: () => { },
            type: Array,
        },
        // 全部用户列表
        userAllList: {
            default: () => { },
            type: Array,
        },
    },
    watch: {
        // 监听组织
        "form.orgId"() {
            this.fetchTable()
        },
        // 监听reportUserId
        "form.reportUserId"(e) {
            this.form.reportUser = this.userAllList.find(x => x.userId === e)?.userName
        }
    },
    data() {
        return {
            // 是否显示弹框
            show: false,
            // 表单
            form: {
                addRecordResultQOList: [
                    // { fileUrl: '', questionId: '1', questionOptionId: '1', questionResult: '12', remark: '12' },
                ],
                checkResultTitle: '',
                checkTaskId: '',
                checkType: undefined,
                orgId: undefined,
                questionTableId: undefined,
                reportUser: undefined,
                reportUserId: undefined,
                dangerRecordQOS: [
                    // {
                    //     checkRecordId: '', checkType: '', dangerLevel: '', dangerTitle: '', dangerType: '', measuresQOList: [
                    //         { finishDate: '', measuresDetail: '', measuresName: '', measuresResult: '', measuresType: '', primaryCause: '', responsibleOrgId: '', responsibleUserId: '' },
                    //     ],
                    //     orgId: '',
                    //     questionId: '',
                    //     recheckUserId: '',
                    //     reportUserId: '',
                    // }
                ],

            },
            // 组织表格
            tableList: [],
            // 防止不响应
            show10: false,
        }
    },
    methods: {
        /**
         * 删除整改措施
         */
        deleteDangerMeasure(index, index1) {
            this.form.dangerRecordQOS[index]['measuresQOList'].splice(1, index1)
            this.show10 = !this.show10
        },
        /**
         * 添加整改措施
         */
        addMeasures(index) {
            this.form.dangerRecordQOS[index]['measuresQOList'].push({
                finishDate: '',
                measuresDetail: '',
                measuresName: '',
                measuresResult: '',
                measuresType: '',
                primaryCause: '',
                responsibleOrgId: undefined,
                responsibleUserId: undefined,
            })
            this.show10 = !this.show10
        },
        /**
         * 删除隐患信息 
         */
        deleteDanger(index) {
            this.form.dangerRecordQOS.splice(index, 1)
            this.show10 = !this.show10
        },
        /**
         * 添加隐患信息 
         **/
        addDanger() {
            this.form.dangerRecordQOS.push({
                dangerLevel: '',
                dangerTitle: '',
                dangerType: '',
                measuresQOList: [],
                questionId: undefined,
                recheckUserId: undefined,
                reportUserId: undefined,
            })
            this.show10 = !this.show10
        },
        /**
         * 删除分区
         */
        deleteZone(index) {
            this.form.addRecordResultQOList.splice(index, 1)
            this.show10 = !this.show10
        },
        /**
         * 添加分区
         **/
        addZone() {
            this.form.addRecordResultQOList.push({
                fileUrl: '',
                questionId: '',
                questionOptionId: '',
                questionResult: '',
                remark: '',
            })
            this.show10 = !this.show10
        },
        /**
         * 打开弹框
         */
        open(data) {
            this.show = true // 打开弹框
            this.form = this.$options.data().form // 初始化
            if (data?.id) {
                this.form = data
                this.form.addRecordResultQOList = data?.recordResultDTOList
                this.form.dangerRecordQOS = data?.dangerRecordDTOList.map(item => {
                    if (item.measuresDTOList) {
                        item.measuresQOList = item.measuresDTOList
                        delete item.measuresDTOList
                    }
                    return {
                        ...item,
                        measuresQOList: item.measuresQOList,
                    }

                })
                delete data?.dangerRecordDTOList
                delete data?.recordResultDTOList
                console.log(this.form)
                // delete this.form.recordResultDTOList
            }

        },
        /**
         * 确认提交
         */
        async handleOk() {
            let { form } = this
            if (form.checkTaskId == '') {
                return message.warning('请填写计划任务Id')
            }
            if (form.reportUserId == '') {
                return message.warning('请填写上报人Id')
            }
            if (form.checkResultTitle == '') {
                return message.warning('请填写检查结果')
            }
            if (form.checkType == '' || form.checkType == undefined) {
                return message.warning('请选择检查类型')
            }
            if (form.orgId == '' || form.orgId == undefined) {
                return message.warning('请选择组织')
            }
            let formCopy = JSON.parse(JSON.stringify(form))
            if (formCopy.dangerRecordQOS) {
                formCopy.dangerRecordQOS.forEach(item => {
                    if (item.measuresQOList) {
                        item.measuresQOList.forEach(item1 => {
                            if (item1.finishDate) {
                                item1.finishDate = dayjs(item1.finishDate['_d']).format('YYYY-MM-DD')
                            }
                        })
                    }
                })
            }
            if (form.id) {
                let res = await postRecordUpdate(formCopy)
                if (res.code == 0) {
                    message.success('修改成功')
                } else {
                    return message.warning(res?.msg)
                }
            } else {
                let res = await postRecordAdd(formCopy)
                if (res.code == 0) {
                    message.success('添加成功')
                } else {
                    return message.warning(res?.msg)
                }
            }
            this.show = false
            this.$emit('ok', 1);
        },
        /**
        * 获取列表
        */
        async fetchTable() {
            let { code, data } = await postTableList({
                orgId: this.form.orgId,
                limit: 0,
                page: 0,
            })
            if (code == 200) {
                this.tableList = data?.records
                if (data?.records.length == 0) {
                    message.error('该组织暂无表格数据')
                }
            }
        },
    },
}
</script>
<style>
.c {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>